<template>
  <div class="container">
    <el-form label-width="120px">
      <!-- 讲师头像 -->
      <el-form-item label="头像">
        <!-- 头衔缩略图 -->
        <pan-thumb :image="user.portrait"/>
      </el-form-item>
      <el-form-item label="账号">
        <el-col :span="8">
          <el-input v-model="user.account" width="100"/>
        </el-col>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="user.gender">
          <el-radio :label="0">男</el-radio>
          <el-radio :label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="职业">
        <el-col :span="16">
          <el-input v-model="user.professional"/>
        </el-col>
      </el-form-item>
      <el-form-item label="电话">
        <el-col :span="8">
          <el-input v-model="user.phoneNum"/>
        </el-col>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="user.email"/>
      </el-form-item>
      <el-form-item label="出生日期">
        <el-date-picker v-model="user.birthday" type="date">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="兴趣爱好">
        <el-input id="input-textarea" :rows="6" v-model="user.interest" type="textarea" maxlength="50"/>
      </el-form-item>
      <el-form-item label="账号状态">
        <el-select v-model="user.status">
          <el-option label="正常" :value="0"></el-option>
          <el-option label="封禁" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="注册时间">
        <el-input v-model="user.gmtCreate"/>
      </el-form-item>

      <!-- 讲师头像 -->
      <!--    <el-form-item label="讲师头像">
            &lt;!&ndash; 头衔缩略图 &ndash;&gt;
            <pan-thumb :image="user.portrait"/>
            &lt;!&ndash; 文件上传按钮 &ndash;&gt;
            <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
            </el-button>
            &lt;!&ndash;
        v-show：是否显示上传组件
        :key：类似于id，如果一个页面多个图片上传控件，可以做区分
        :url：后台上传的url地址
        @close：关闭上传组件
        @crop-upload-success：上传成功后的回调 &ndash;&gt;
            <image-cropper
                v-show="imagecropperShow"
                :width="300"
                :height="300"
                :key="imagecropperKey"
                :url="BASE_API+'/eduoss/file'"
                field="file"
                @close="close"
                @crop-upload-success="cropSuccess"/>
          </el-form-item>-->

      <!--    <el-form-item>-->
      <!--      <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate()">保存</el-button>-->
      <!--    </el-form-item>-->
    </el-form>
  </div>
</template>

<script>

  // 引入图片上传组件
  import ImageCropper from '@/components/ImageCropper'
  import PanThumb from '@/components/PanThumb'

  import user from "@/api/admin/admin"

  export default {
    // 声明组件
    components: {
      ImageCropper,
      PanThumb,
    },
    data() {
      return {
        user: {},
      }
    },
    created() {
      // 如果路由中有参数值则执行此方法
      if(this.$route.params && this.$route.params.id) {
        // 从路由中获取id值
        const id = this.$route.params.id
        // 调用根据id查询的方法
        this.getUserDetail(id)
      }
    },
    watch: {  // 监听(解决路由切换问题)
      // 路由变化方式，路由发生变化即执行
      $route(to, from){
        this.getUserDetail();
      }
    },
    methods: {
      getUserDetail(id) {
        user.getUserDetail(id).then(response => {
          this.user = response.data.item
        })
      },
    }
  }
</script>

// scoped表示这里定义的样式只在当前页面范围内生效，不会污染到其他的页面
<style scoped>
  .container {
    margin: 20px;
  }
  .el-input {
    width: 300px;
  }
  #input-textarea {
    width: 300px;
  }

</style>